import React from 'react';

import styles from './index.less';
interface Props {
  tabStatus: number;
  setTabStatus: (a: number) => void;
}
interface Tabs {
  name: string;
  id: number;
}
const tabsData: Tabs[] = [{ name: '个人信息', id: 1 }, { name: '企业信息', id: 5 },{ name: '已购产品', id: 2 }, { name: '历史订单', id: 3 }, { name: '全部通知', id: 4 }];
const LeftContent: React.FC<Props> = (props) => {
  const { tabStatus, setTabStatus } = props;
  const handleClick = (id: number) => {
    setTabStatus(id);
  };

  return (
    <>
      <div className={styles.leftContent}>
        {
          tabsData.map((item: Tabs) => {
            return <div style={tabStatus===item.id ? { background: 'rgba(26, 61, 201, 0.05)', borderRight: '4px solid #1A3DC9' } : {}} className={styles.buttons} key={item.id} onClick={() => handleClick(item.id)}>{item.name}</div>;
          })
        }
      </div>
    </>
  );
};
export default LeftContent;
